<template>
	<z-nav-bar title="学员提问"></z-nav-bar>
	<search-box @search="searchData" placeholder="请输入问题关键词"></search-box>
	<z-no-data v-if="!params.loading && !list.length"></z-no-data>
	<view v-for="item in list" :key="item.id" class="question-item flex_fs" @click="viewAsk(item)">
		<image :src="setting.oss_pub_domain + item.studentAvatar" class="user-head"></image>
		<view class="width-100">
			<view class="u-line-1" style="width: 500rpx;">{{ item.studentName }}</view>
			<view class="flex_sbc">
				<view>{{ item.descriptionTagName }}</view>
				<view v-if="item.isUp == 1" class="button uni-extra-color-bg">已解答</view>
				<view v-else class="button uni-color-main-bg">待解答</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { getTraineesList } from '@/api/player.js';
import { onLoad, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';
import { ref, reactive, getCurrentInstance } from 'vue';
const { proxy: that } = getCurrentInstance();
let all = 0;
onLoad((opt) => {
	all = parseInt(opt.all || 0);
	fetchData();
});
const playerInfo = uni.getStorageSync('player-info');
const list = ref([]),
	params = reactive({
		pageNum: 1,
		pageSize: 10,
		total: 0,
		loading: true
	}),
	query = ref({});
function fetchData() {
	params.loading = true;
	const param = {
		pageNum: params.pageNum,
		pageSize: params.pageSize,
		...query.value
	};
	if (!all) param.stuId = playerInfo.id;

	getTraineesList(param)
		.then((res) => {
			if (params.pageNum === 1) list.value = res.rows;
			else list.value.push(...res.rows);
			params.total = res.total;
			uni.stopPullDownRefresh();
			params.loading = false;
		})
		.catch(() => {
			params.loading = false;
		});
}

function searchData(e) {
	params.pageNum = 1;
	query.value.name = e;
	fetchData();
}

onPullDownRefresh(() => {
	query.value = {};
	params.pageNum = 1;
	fetchData();
});

onReachBottom(() => {
	if (list.value.length >= params.total) return;
	params.pageNum += 1;
	fetchData();
});

function viewAsk(item) {
	uni.setStorageSync('ask-details', item);
	uni.navigateTo({
		url: '/pages/ask-questions/details/details',
		events: {
			resolveDone(e) {
				params.pageNum = 1;
				fetchData();
			}
		}
	});
}
</script>

<style lang="scss">
page {
	background: $uni-F5F5F5;
}

.search-box {
	width: 100vw;
	height: 88rpx;
	background: $uni-white;
	.input-box {
		width: 702rpx;
		height: 64rpx;
		background: $uni-F5F5F5;
		border-radius: 16rpx;
		box-sizing: border-box;
		padding: 0 24rpx;
	}
}

.question-item {
	width: 686rpx;
	box-sizing: border-box;
	padding: 32rpx;
	background: $uni-white;
	margin: 24rpx 32rpx 0;
	border-radius: 24rpx;
	.user-head {
		width: 88rpx;
		height: 88rpx;
		border-radius: 44rpx;
		flex-shrink: 0;
		margin-right: 24rpx;
		background: #f5f5f5;
	}
	.button {
		width: 104rpx;
		height: 56rpx;
		line-height: 56rpx;
		text-align: center;
		color: $uni-white;
		border-radius: 16rpx;
		font-size: 24rpx;
	}
}
</style>
